<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>徐磊的个人主页</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="徐磊的个人主页,徐磊的个人简历,徐磊的博客,前端开发,前端个人简历" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href="//fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">


<!-- start-smooth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smooth-scrolling -->
</head>
	
<body>
<!-- banner -->
	<div class="banner-figures">
		<div class="banner">
			<div class="container banner-drop">
				<div class="header">
					<div class="header-left logo">
						<h1><a href="http://blog.xulay.com" target="_blank">链接到我的博客，测试</a></h1>
					</div>
					<div class="header-right">
						<nav>
						  <ul>
							<li class="active">
								<a href="index.html" class="active"><span>Home</span></a>
							</li>
							<li>
								<a href="#about" class="scroll"><span>About</span></a>
							</li>
							<li>
								<a href="#experience" class="scroll"><span>Experience</span></a>
							</li>
							<li>
								<a href="#projects" class="scroll"><span>Projects</span></a>
							</li>
							<li>
								<a href="#contact" class="scroll"><span>Contact</span></a>
							</li>
						  </ul>
						</nav>
						<div class="menu-icon animated wow zoomIn" data-wow-duration="1000ms" data-wow-delay="800ms"><span></span></div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="name" >
					<h2>徐磊的个人主页</h2>
					<p> Web Designer & Developer</p>
				</div>
				<div class="social-icons animated wow bounceInDown" data-wow-duration="1000ms" data-wow-delay="800ms">
					<ul class="top-links">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
					</ul>
				</div>
			</div>
							<div class="banner-btm-grid-w3ls">
		<div class="banner-left-wthree">
			<img src="images/me.jpg" alt=" " class="img-responsive">
			<ul class="address">
					
					<li>
							<ul class="address-text">
								<li><b>NAME</b></li>
								<li>: 徐磊</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>D.O.B</b></li>
								<li>: 01-07-1996</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>ADDRESS </b></li>
								<li>: 苏州张家港</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>E-MAIL </b></li>
								<li><a href="mailto:5052936@qq.com">:5052936@qq.com</a></li>
							</ul>
						</li>
						
					</ul>
		</div>
		<div class="banner-right-w3-agileits">
			<!--<iframe src="https://player.vimeo.com/video/150998376"></iframe>-->
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
			待补充<br />
		</div>
		<div class="clearfix"></div>
	</div>
		</div>
			<script>
				(function($){
				  $(".menu-icon").on("click", function(){
						$(this).toggleClass("open");
						$(".container").toggleClass("nav-open");
						$("nav ul li").toggleClass("animate");
				  });
				  
				})(jQuery);
			</script>
		
	</div>

<!-- //banner -->
<!-- about -->
<div class="about" id="about">
	<div class="container">
		<span class="about-top-w3">Who I am?</span>
		<h4 class="title-w3ls">About Me</h4>
		<h5 class="sub">自我介绍</h5>
		<p class="para-w3-agile">我叫徐磊</p>
		<p class="para-w3-agile">我叫徐磊</p>
		<div class="skills-bar">
		<h4 class="title-w3ls">我的技能</h4>
			<section class='bar'>
				<section class='wrap'>
					<div class='wrap_right'>
					  <div class='bar_group'>
					  	<div class='bar_group__bar thin' label='HTML' show_values='true' tooltip='true' value='100'></div>
					  	<div class='bar_group__bar thin' label='CSS' show_values='true' tooltip='true' value='80'></div>
					  	<div class='bar_group__bar thin' label='JavaScript' show_values='true' tooltip='true' value='60'></div>
						<div class='bar_group__bar thin' label='jQuery' show_values='true' tooltip='true' value='50'></div>
						<div class='bar_group__bar thin' label='ThinkPHP' show_values='true' tooltip='true' value='20'></div>
						</div>
					</div>
					<div class='clear'></div>
				</section>
			</section>
		</div>
	</div>
</div>
<!-- //about -->
<!--work-experience-->
	<div id="experience" class="experience">
		<div class="container">
		<span class="about-top-w3">Versatile Web Designer</span>
			<h4 class="title-w3ls">Work Experience</h4>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2014 - 2016 </h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-briefcase"> </span> Project Manager</h5>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info"> 
				<div class="col-md-6 work-right work-right2"> 
					<h4>2013 - 2014 </h4>
				</div>
				<div class="col-md-6 work-left work-left2"> 
					<h5> Ui Design & Developer <span class="glyphicon glyphicon-briefcase"> </span></h5>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2012 - 2013 </h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-briefcase"> </span> Web Developer</h5>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info"> 
				<div class="col-md-6 work-right work-right2"> 
					<h4>2010 - 2012 </h4>
				</div>
				<div class="col-md-6 work-left work-left2"> 
					<h5> Graphic Designer <span class="glyphicon glyphicon-briefcase"></span> </h5>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//work-experience-->
<!-- projects -->
<div class="projects" id="projects">
	<div class="container">
	<span class="about-top-w3">The best of my projects </span>
		<h4 class="title-w3ls">Featured Projects</h4>
		<div class="news-bottom">
				<div class="news-one-wthree-agile">
					<div class="col-md-6 news-left">
						        <div class="biseller-column">
										<a class="lightbox" href="#one">
											<img src="images/p1.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="one">
										 <img src="images/p1.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
											
										</div>
							   </div>

					</div>	
					<div class="col-md-6 news-right"> 
					<a href="#one"><h4>Creative Design</h4></a>
						<p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>	
					</div>	
					<div class="clearfix"> </div>	
				</div>
				<div class="news-one-wthree-agile">
					<div class="col-md-6 news-right"> 
						<a href="#three"><h4>Creative Design</h4></a>
						<p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>	
					</div>	
					<div class="col-md-6 news-left">
						 <div class="biseller-column">
										<a class="lightbox" href="#three">
											<img src="images/p2.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="three">
										 <img src="images/p2.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>						
					<div class="clearfix"> </div>	
				</div>	
			  <div class="news-one-wthree-agile">
					<div class="col-md-6 news-left">
							<div class="biseller-column">
										<a class="lightbox" href="#two">
											<img src="images/p3.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="two">
										 <img src="images/p3.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>	
					<div class="col-md-6 news-right"> 
					<a href="#two"><h4>Awesome Design</h4></a>
						<p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>	
					</div>	
					<div class="clearfix"> </div>	
				</div>	
				<div class="news-one-wthree-agile">
					<div class="col-md-6 news-right"> 
						<a href="#four"><h4>Awesome Design</h4></a>
						<p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>	
					</div>	
					<div class="col-md-6 news-left">
						 <div class="biseller-column">
										<a class="lightbox" href="#four">
											<img src="images/p4.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="four">
										 <img src="images/p4.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>						
					<div class="clearfix"> </div>	
				</div>	
				 <div class="news-one-wthree-agile">
					<div class="col-md-6 news-left">
							<div class="biseller-column">
										<a class="lightbox" href="#five">
											<img src="images/p5.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="five">
										 <img src="images/p5.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>	
					<div class="col-md-6 news-right"> 
					<a href="#five"><h4>Simple Design</h4></a>
						<p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>	
					</div>	
					<div class="clearfix"> </div>	
				</div>
				<div class="clearfix"> </div>				
			</div>	
	</div>
</div>
<!-- //projects -->
<!-- contact -->
<div class="contact" id="contact">
	<div class="container">
	<span class="about-top-w3">Send me a message</span>
		<h4 class="title-w3ls">Contact Me</h4>
		<div class="col-md-5 contact-agileits-w3layouts">
		<form action="#" method="post">
				<input type="text" name="Your Name" placeholder="Name" required="" />
				<input type="email" name="Your Email" placeholder="Email" required="" />
				<input type="text" Name="Phone Number" placeholder="Number" required=""/>
				<textarea name="Message" placeholder="Message" required=""></textarea>
				<input type="submit" value="Submit">
			</form>
			<h5 class="sub">Looking for Address</h5>
			<p><span>Location</span> : 苏州张家港</p>
			<p><span>Phone</span> : 17625393952</p>
			<p><span>Email</span><a href="mailto:example@mail.com"> : 5052936@qq.com</a></p>
		</div>


		<div class="col-md-7 contact-map-right">
		<div id="map"></div>

			<!-- Map-JavaScript -->
			<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>        
			<script type="text/javascript">
				google.maps.event.addDomListener(window, 'load', init);
				function init() {
					var mapOptions = {
						zoom: 11,
						center: new google.maps.LatLng(40.6700, -73.9400),
						styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
					};
					var mapElement = document.getElementById('map');
					var map = new google.maps.Map(mapElement, mapOptions);
					var marker = new google.maps.Marker({
						position: new google.maps.LatLng(40.6700, -73.9400),
						map: map,
					});
				}
			</script>-->
		<!-- //Map-JavaScript -->

		</div>
	</div>
</div>
<!-- //about -->

	<div class="footer">
		<div class="container">
			<p>© 2017 徐磊的个人主页 </p>
		</div>
	</div>
<!-- //footer -->
<script src="js/bars.js"></script>

<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>
